<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left" @click="back()">
        <img src="../assets/order_center/shangs.png">
      </div>
      <span>填写申请表</span>
      <div class="right">
      </div>
    </div>
		<div class="n"></div>
		<div class="biao">
			<div class="list">
				<div class="title">
					<span>商户主体信息</span>
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>商户名称</span>
					</div>
					<input type="text" placeholder="请输入商户名称" v-model="bus_name">
				</div>
				<!-- <div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>招牌名</span>
					</div>
					<input type="text" placeholder="请输入招牌名" v-model="bus_pai">
				</div> -->
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>商户所在地</span>
					</div>
					<div class="adr">
						<yd-cell-group>
							<yd-cell-item arrow>
								<input slot="right" type="text" @click.stop="show1 = true" v-model="bus_cityaddre" readonly placeholder="请选择" class="txt">
							</yd-cell-item>
						</yd-cell-group>
						<yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
					</div>
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>地址</span>
					</div>
					<input type="text" placeholder="请输入地址" v-model="bus_addre">
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>联系电话</span>
					</div>
					<input type="text" placeholder="请输入联系电话" v-model="bus_phone">
				</div>
				<div class="bar">
					<div class="name">
						<span>营业时间</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow>
									<span slot="left"></span>
									<yd-datetime type="time" v-model="bus_begin" slot="right"></yd-datetime>
								</yd-cell-item>
							</yd-cell-group>
						</div>
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow>
									<span slot="left"></span>
									<yd-datetime type="time" v-model="bus_end" slot="right"></yd-datetime>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>所属行业</span>
					</div>
					<div class="lc">
						<div class="inf" style="width:100%;">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right" v-model="bus_industry">
											<option value="农、林、牧、渔业">农、林、牧、渔业</option>
											<option value="采矿业">采矿业</option>
											<option value="服务行业">服务行业</option>
											<option value="制造业">制造业</option>
											<option value="电力、热力、燃气及水生产和供应业">电力、热力、燃气及水生产和供应业</option>
											<option value="建筑业">建筑业</option>
											<option value="批发和零售业">批发和零售业</option>
											<option value="交通运输、仓储和邮政业">交通运输、仓储和邮政业</option>
											<option value="住宿和餐饮业">住宿和餐饮业</option>
											<option value="信息传输、软件和信息技术服务业">信息传输、软件和信息技术服务业</option>
											<option value="金融业">金融业</option>
											<option value="房地产业">房地产业</option>
											<option value="租赁和商务服务业">租赁和商务服务业</option>
											<option value="科学研究和技术服务业">科学研究和技术服务业</option>
											<option value="水利、环境和公共设施管理业">水利、环境和公共设施管理业</option>
											<option value="居民服务、修理和其他服务业">居民服务、修理和其他服务业</option>
											<option value="教育">教育</option>
											<option value="卫生和社会工">卫生和社会工</option>
											<option value="其他">其他</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div>


	        <div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>分行/支行</span>
					</div>


					<div class="lc" >
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right" v-model="bus_fenhang" @change="fenhang">
											<option v-for="(item,index) in listzhiahng" :key="index" :value="item.id">{{item.name}}</option> 
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>

            <div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right" v-model="bus_zhihang" @change="zhihangs()">  
											<option v-for="(item,index) in dierge[0]" :key="index" :value="item.id">{{item.name}}</option> 
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>  
           
				  </div>
	       

				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>营业执照类型</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right" v-model="bus_license_type">
												<option value="公司">公司</option>
												<option value="个人商户">个人商户</option>
												<option value="其他">其他</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>营业执照号</span>
					</div>
					<input type="text" placeholder="请输入营业执照号" v-model="bus_license_num">
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>营业执照有效期</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow>
									<span slot="left"></span>
									<yd-datetime type="date" v-model="bus_license_begin" slot="right"></yd-datetime>
								</yd-cell-item>
							</yd-cell-group>
						</div>
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow>
									<span slot="left"></span>
									<yd-datetime type="date" v-model="bus_license_end" slot="right"></yd-datetime>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div>
				<!-- <div class="bar">
					<div class="name">
						<span>管护人</span>
					</div>
					<input type="text" placeholder="请输入管护人姓名" v-model="pipe_name">
				</div> -->
				<!-- <div class="bar">
					<div class="name">
						<span>客户经理</span>
					</div>
					<input type="text" placeholder="请输入客户经理姓名" v-model="cust_name">
				</div> -->
				<!-- <div class="bar">
					<div class="name">
						<span>商户标记</span>
					</div>
					<input type="text" placeholder="请输入商户标记" v-model="bus_sign">
				</div> -->
				<!-- <div class="bar">
					<div class="name">
						<span>外部商户标记</span>
					</div>
					<input type="text" placeholder="请输入外部商户标记" v-model="bus_out_sign">
				</div> -->
			</div>
		</div>
   	<div class="btn">
			<button class="next" @click="Table_fortwoClick()">下一步</button>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import { CitySelect } from "vue-ydui/dist/lib.rem/cityselect";
Vue.component(CitySelect.name, CitySelect);
import District from "ydui-district/dist/jd_province_city_area_id";

import { CellGroup, CellItem } from "vue-ydui/dist/lib.rem/cell";
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);

import { DateTime } from "vue-ydui/dist/lib.rem/datetime";
Vue.component(DateTime.name, DateTime);
export default {
  name: "Table_for",
  data() {
    return {
      listzhiahng:[],
      bus_fenhang:'',
      bus_zhihang:0,
      dierge:[],


      index: 0,
      isshow: false,
      show1: false,
      district: District,
      bus_name: "", //商户名称
      // bus_pai: "", //商户招牌
      bus_cityaddre: "", //商户所在地址
      bus_addre: "", //详细地址
      bus_phone: "", //联系电话
      bus_begin: "", //营业开始时间
      bus_end: "", //营业结束时间
      bus_industry: "", //所属行业
      bus_license_type: "", //营业执照类型
      bus_license_num: "", //营业执照号码
      bus_license_begin: "", //营业执照有效期开始时间
      bus_license_end: "", //营业执照有效期结束时间
      // pipe_name: "", //管护人
      // cust_name: "", //客户经理
      // bus_sign: "", //商户标记
      // bus_out_sign: "" //外部商户标记
      fhid:'',
    };
  },
  methods: { 
    zhid: function() {
      let self = this;
      let url = "/api/bank/lists";
      self.httpPost(
        url,
        { user_id: this.myid, token: this.token, pagesize: 999, p: 1 },
        function(res) {
          if (res.code == 200) {
            self.listzhiahng = res.data;
          }
        }
      );
    },
    fenhang(){
        console.log(this.bus_fenhang) 
        this.fhid=this.bus_fenhang
        var obj =[];
        this.listzhiahng.forEach(e => {
          if(this.bus_fenhang == e.id){
            obj.push(e.branch)
          }
        });
        this.dierge = obj
        console.log(obj)
    },
    zhihangs(){
        console.log(this.bus_zhihang) 
        if(this.bus_zhihang==0){
          this.fhid = 0
        }else{
          this.fhid=this.bus_zhihang

        }
    },
    //返回上一页面
    back: function() {
      this.$router.go(-1);
    },
    //获取省市区
    result1(ret) {
      this.bus_cityaddre =
        ret.itemName1 + " " + ret.itemName2 + " " + ret.itemName3;
    },
    //下一步提交
    Table_fortwoClick() {
		//填写信息不能为空
      if (!this.bus_name) {
        this.$dialog.toast({ mes: "请输入商户名称" });
        return;
      }
      // if (!this.bus_pai) {
      //   this.$dialog.toast({ mes: "请输入商户招牌" });
      //   return;
      // }
      if (!this.bus_cityaddre) {
        this.$dialog.toast({ mes: "请选择商户所在地" });
        return;
      }
      if (!this.bus_addre) {
        this.$dialog.toast({ mes: "请输入详细地址" });
        return;
      }
      if (!this.bus_phone) {
        this.$dialog.toast({ mes: "请输入联系电话" });
        return;
      }
      if (!this.bus_begin) {
        this.$dialog.toast({ mes: "请选择营业开始时间" });
        return;
      }
      if (!this.bus_end) {
        this.$dialog.toast({ mes: "请选择营业结束时间" });
        return;
      }
      if (!this.bus_industry) {
        this.$dialog.toast({ mes: "请选择所属行业" });
        return;
      }
      if (!this.bus_fenhang) {
        this.$dialog.toast({ mes: "请选择分行/支行" });
        return;
      }
      if (!this.bus_license_num) {
        this.$dialog.toast({ mes: "请输入营业执照号码" });
        return;
      }
      if (!this.bus_license_type) {
        this.$dialog.toast({ mes: "请选择营业执照类型" });
        return;
      }
      if (!this.bus_license_begin) {
        this.$dialog.toast({ mes: "请选择营业执照有效期开始时间" });
        return;
      }
      if (!this.bus_license_end) {
        this.$dialog.toast({ mes: "请选择营业执照有效期结束时间" });
        return;
      }
      // if (!this.pipe_name) {
      //   this.$dialog.toast({ mes: "请输入管护人" });
      //   return;
      // }
      // if (!this.cust_name) {
      //   this.$dialog.toast({ mes: "请输入客户经理" });
      //   return;
      // }
    //   if (!this.bus_sign) {
    //     this.$dialog.toast({ mes: "请输入商户标记" });
    //     return;
    //   }
    //   if (!this.bus_out_sign) {
    //     this.$dialog.toast({ mes: "请输入外部商户标记" });
    //     return;
	  // }
	  //数据保存的本地
      localStorage.setItem("bus_name", this.bus_name);
	  // localStorage.setItem("bus_pai", this.bus_pai);
	  localStorage.setItem("bus_cityaddre", this.bus_cityaddre);
	  localStorage.setItem("fhid", this.fhid);
	  localStorage.setItem("bus_addre", this.bus_addre);
	  localStorage.setItem("bus_phone", this.bus_phone);
	  localStorage.setItem("bus_begin", this.bus_begin);
	  localStorage.setItem("bus_end", this.bus_end);
	  localStorage.setItem("bus_industry", this.bus_industry);
	  localStorage.setItem("bus_license_num", this.bus_license_num);
	  localStorage.setItem("bus_license_type", this.bus_license_type);
	  localStorage.setItem("bus_license_begin", this.bus_license_begin);
	  localStorage.setItem("bus_license_end", this.bus_license_end);
	  // localStorage.setItem("pipe_name", this.pipe_name);
	  // localStorage.setItem("cust_name", this.cust_name);
	  // localStorage.setItem("bus_sign", this.bus_sign);
	  // localStorage.setItem("bus_out_sign", this.bus_out_sign);
      this.$router.push("Table_fortwo");
    }
  },
  created() {
    this.token = localStorage.getItem("mytoken");
    this.myid = localStorage.getItem("myid");
    this.zhid()
    document.title = "填写申请表";
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  margin-bottom: 0.03rem;
  position: fixed;
  z-index: 999;
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.n {
  height: 0.92rem;
}
.biao {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.list {
  width: 90%;
  background: #fff;
  border-radius: 20px;
  padding: 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list .title span {
  font-size: 0.32rem;
  color: #333;
}
.list .bar {
  width: 100%;
  height: 1.6rem;
  display: flex;
  flex-direction: column;
}
.list .bar .name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  align-items: center;
}
.list .bar .name span {
  font-size: 0.28rem;
  margin-left: 0.1rem;
}
.list .bar .name img {
  width: 0.1rem;
  height: 0.1rem;
}
.list .bar input {
  border: 1px solid #949494;
  height: 0.8rem;
  border-radius: 5px;
  text-indent: .1rem;
}
.list .bar .adr {
  height: 0.8rem;
  border-radius: 5px;
}
.list .bar .lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.list .bar .adr input {
  border: none;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.btn .next {
  width: 90%;
  height: 0.9rem;
  background: #e63f3f;
  border: none;
  border-radius: 10px;
  font-size: 0.32rem;
  color: #fff;
}
.txt::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.05rem;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.28rem;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
</style>
<style>
.adr .yd-cell {
  border: 1px solid #949494;
  height: 0.8rem !important;
  border-radius: 5px;
}
.adr .yd-cell-right {
  height: 0.8rem;
  min-height: 0;
}
.yd-cell:after {
  height: 0;
}
.lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.lc .inf {
  height: 0.8rem !important;
  width: 48.2%;
  border: 1px solid #949494;
  border-radius: 5px;
}
.yd-cell-right {
  min-height: 0;
}
.lc .inf .yd-cell {
  height: 0.6rem !important;
  margin-top: 0.03rem;
  overflow: hidden;
}
.lc .inf .yd-cell-right {
  height: 0.7rem !important;
}
.lc .inf .yd-cell-right select {
  height: 0.5rem !important;
}
.lc .inf .yd-cell-item {
  width: 90%;
  margin: 0 auto;
  height: 0.7rem;
}
</style>



